<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .music{
            position:relative;
            margin:0 auto;
            width: 300px;
            height: 560px;
            /*border:1px solid pink;*/
            background: pink;
            padding-top:20px;
        }
        .music:after{
            content:'';
            position: absolute;
            top:210px;
            left: 0;
            width: 100%;
            height: 300px;
            background: linear-gradient(to top, rgba(255,192,203,1) 0%,rgba(255,192,203,0) 30%,rgba(255,192,203,0) 70%,rgba(255,192,203,1) 100% );
            /*background: red;*/
        }
        h1{
            text-align: center;
            font-size:26px;
            line-height: 50px;
        }
        .img-wrap{
            overflow: hidden;
            width: 120px;
            height: 120px;
            margin:10px auto;
            background: blue;
            border-radius: 50%;
        }

        .lrc-wrap{
            /**/
            overflow: hidden;
            /*padding:20px 0;*/
            height: 300px;
            /*border:2px solid blue;*/
        }


        .lrc{
            position: relative;
            /*height: 600px;*/
            padding-top:50px;
            background: pink;
        }
        p{
            font-size:16px;
            text-align: center;
            line-height: 30px;
        }
        .active{
            color:#fff;
        }

        .audio-wrap{

            height: 70px;
            background: red;
        }
        .progress{
            height: 20px;
            background: blue;
        }
        .controls{
            height: 50px;
            background: pink;
        }

        .content{
            display:flex;
            justify-content: space-around;
            align-items: center;
            width: 160px;
            height: 100%;
            margin:auto;
            /*background: yellow;*/
        }
        .prev,.next{
            width: 30px;
            height: 30px;
            /*background: #ccc;*/
        }
        .play{
            width: 50px;
            height: 50px;
            /*background: red;*/
        }
        .prev .iconfont,.next .iconfont,.play .iconfont{
            display:block;
            width: 100%;
            height: 100%;
            font-size:30px;
            text-align: center;
            line-height: 30px;
            color:#58a;
        }
        .play .iconfont{
            font-size:50px;
            line-height: 50px;
            color:green;
        }
    </style>
</head>
<body>

    <div class="music">
        <h1>音乐播放器</h1>
        <div class="img-wrap">
            <img src="./img/use.jpg" width="120" height="120" alt="">
        </div>



        <div class="lrc-wrap">
            <div class="lrc">
                <p data-time="00:00">告白气球</p>
                <p data-time="00:04">词：方文山 曲：周杰伦</p>
                <p data-time="00:09">演唱：周杰伦</p>
                <p data-time="00:13">我爱歌词网 www.5ilrc.com</p>
                <p data-time="00:22">塞纳河畔 左岸的咖啡</p>
                <p data-time="00:26">我手一杯 品尝你的美</p>
                <p data-time="00:28">留下唇印的嘴</p>
                <p data-time="00:33">花店玫瑰 名字写错谁</p>
                <p data-time="00:36">告白气球 风吹到对街</p>
                <p data-time="00:39">微笑在天上飞</p>
                <p data-time="00:43">你说你有点难追 想让我知难而退</p>
                <p data-time="00:48">礼物不需挑最贵 只要香榭的落叶</p>
                <p data-time="00:54">营造浪漫的约会 不害怕搞砸一切</p>
                <p data-time="00:59">拥有你就拥有 全世界</p>
                <p data-time="01:04">亲爱的 爱上你 从那天起</p>
                <p data-time="01:10">甜蜜的很轻易</p>
                <p data-time="01:14">亲爱的 别任性 你的眼睛</p>
                <p data-time="01:21">在说我愿意</p>
                <p data-time="01:48">塞纳河畔 左岸的咖啡</p>
                <p data-time="01:51">我手一杯 品尝你的美</p>
                <p data-time="01:54">留下唇印的嘴</p>
                <p data-time="01:59">花店玫瑰 名字写错谁</p>
                <p data-time="02:01">告白气球 风吹到对街</p>
                <p data-time="02:04">微笑在天上飞</p>
                <p data-time="02:08">你说你有点难追 想让我知难而退</p>
                <p data-time="02:14">礼物不需挑最贵 只要香榭的落叶</p>
                <p data-time="02:19">营造浪漫的约会 不害怕搞砸一切</p>
                <p data-time="02:25">拥有你就拥有 全世界</p>
                <p data-time="02:29">亲爱的 爱上你 从那天起</p>
                <p data-time="02:36">甜蜜的很轻易</p>
                <p data-time="02:40">亲爱的 别任性 你的眼睛</p>
                <p data-time="02:47">在说我愿意</p>
                <p data-time="02:51">亲爱的 爱上你 恋爱日记</p>
                <p data-time="02:57">飘香水的回忆</p>
                <p data-time="03:01">一整瓶 的梦境 全都有你</p>
                <p data-time="03:08">搅拌在一起</p>
                <p data-time="03:12">亲爱的别任性 你的眼睛</p>
                <p data-time="03:20">在说我愿意</p>
            </div>

        </div>

        <div class="audio-wrap">
            <audio class="audio" src="./media/11.mp3" ></audio>
            <!--   进度条         -->
            <div class="progress"></div>

            <!--     播放控件      -->
            <div class="controls">
                <div class="content">
                    <div class="prev">
                        <span class="iconfont icon-ai10"></span>
                    </div>
                    <div class="play">
                        <span class="iconfont icon-bofang"></span>
                    </div>
                    <div class="next">
                        <span class="iconfont icon-ai09"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 1. 获取元素
        let audio = document.querySelector(".audio")
        let lrcWrap = document.querySelector(".lrc-wrap")
        let ap = document.querySelectorAll('p')

        // 获取控件
        let play = document.querySelector('.play')
        let pIcon = play.querySelector("span")


        // 控件部分

        // 播放暂停
        let mark = true;
        play.onclick = function(){
            // console.log(1)
            if(mark){
                // 音频播放
                audio.play()
            }else{
                // 音频暂停
                audio.pause()
            }
            // 控件取反
            mark = !mark

            // 改变图标
            pIcon.classList.toggle("icon-bofang")
            pIcon.classList.toggle("icon-ai07")
        }



        // 处理歌词的部分
        // 2. 绑定音频播放时间
        audio.ontimeupdate = function(){
            // 处理音频播放时间
            // console.log(this.currentTime)
            let currentTime = formatTime(this.currentTime)
            console.log(currentTime)

            // 根据播放的时间处理歌词
            // 获取时间匹配成功的歌词所在的元素
            let lrcdom = document.querySelector(`[data-time="${currentTime}"]`)
            // console.log(lrcdom)

            // 判断当前时间是否获取到了dom元素
            if(lrcdom){
                // 先让所有的p标签的样式归位
                // ap.forEach((item) => {
                //     item.className = ''
                // })

                let _top = lrcdom.offsetTop - 50
                console.log(_top)

                // 给选中的歌词添加类名
                // lrcdom.style.color = '#f60'

                lrcdom.className = 'active'

                // 获取上一个兄弟元素删除类名
                lrcdom.previousElementSibling && (lrcdom.previousElementSibling.className = "");



                // 滚动盒子
                lrcWrap.scrollTo(0,_top)
            }

        }

        // util
        // 处理事件为固定格式
        function formatTime(currentTime){
            let time = parseInt(currentTime)

            // 根据当前的秒计算分钟与秒钟
            let mm  = toTwo(parseInt(time /60))
            let ss = toTwo(time % 60)

            // 返回固定格式的时间
            return `${mm}:${ss}`
        }

        // 将各位数字的时间转为两位数
        function toTwo(num){
            // if(num <  10){
            //     return '0' + num;
            // }else{
            //     return '' + num
            // }

            return (num < 10 ? '0': '') + num;
        }


    </script>
</body>
</html>